<template>
  <div ref="cardRef" class="software-card flex-column flex-center-start">
    <div class="image">
      <a :href="getScnetUrl(softwareInfo.id)" target="_blank">
        <img crossorigin="anonymous" :src="getUrl(softwareInfo.skuImgUrl)" />
      </a>
    </div>
    <div class="name">
      <a :href="getScnetUrl(softwareInfo.id)" :title="softwareInfo.nameCn" v-html="softwareInfo.nameCn" target="_blank"></a>
    </div>
    <div class="desc">{{ softwareInfo.desc }}</div>
    <a-space size="small" class="tags flex-row flex-start">
      <div v-for="(tag, index) in getShowList(softwareInfo.skuTags)" :key="index" class="tag">{{ tag }}</div>
    </a-space>
    <div v-if="false" class="others flex-row flex-start">
      <div class="type">{{ softwareInfo.storeName }}</div>
      <div class="comment">
        <img src="@/assets/images/comment.png" />
      </div>
    </div>
    <div class="price">{{ softwareInfo.basePrice>0 ? softwareInfo.basePrice : '免费' }}</div>
    <a-divider style="margin: 10px 0" />
    <div class="feedback flex-row flex-start">
      <div class="used">{{ softwareInfo.skuSaleCount ? softwareInfo.skuSaleCount : 0 }}人用过</div>
      <div class="rate"><a-rate :value="softwareInfo.skuScore ? softwareInfo.skuScore : 0" disabled style="color: #C20017; font-size: 14px;" /></div>
    </div>
  </div>
</template>

<script>
import appConfig from '@/config'
import { getUrlWithTimestamp } from '@/utils'
export default {
  name: 'SoftwareCard',
  props: {
    softwareInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      contentWidth: 245, // 内容宽度 = 组件宽度 - 左右两边的padding = 285 - 20 - 20 = 245
      resizeObserver: null
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        this.contentWidth = entry.contentRect.width - 40;
      }
    })
    this.resizeObserver.observe(this.$refs.cardRef)
  },
  beforeUnmount() {
    this.resizeObserver.disconnect()
  },
  methods: {
    getScnetUrl (id) {
      if (!id) {
        return;
      }

      return appConfig.scnetSoftwareBaseUrl + id;
    },

    getUrl (url) {
      return getUrlWithTimestamp(url);
    },
    
    getShowList(tagList) {
      const showList = [];
      if (this.contentWidth) {
        const widthEellipsis = 6 + 16 + 20;
        let widthTemp = 0;
        if (tagList && tagList.length > 0) {
          for(let i = 0; i < tagList.length; i++) {
            let widthCurrent = tagList[i].length * 14 + 20;
            if ((widthTemp + widthCurrent + widthEellipsis) <= this.contentWidth) {
              widthTemp += widthCurrent;
              if (i>0) {
                widthTemp += 6;
              }
              showList.push(tagList[i]);
            } else {
              showList.push("...");
              break;
            }
          }
        }
      }

      return showList;
    }
  }
}
</script>

<style lang="less" scoped>
.software-card {
  width: 285px;
  height: 380px;
  padding: 20px;
  border: 1px solid @white-bg;
  border-radius: 12px;
  background: @white;

  .image {
    width: 120px;
    height: 120px;
    margin-top: 10px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px solid @font-grey-disable;
      opacity: 0.9;
    }
  }

  .name {
    margin-top: 20px;
    height: 20px;
    line-height: 20px;
    width: 244px;
    font-size: 20px;
    font-weight: 500;
    color: @font-black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desc {
    width: 100%;
    height: 14px;
    line-height: 14px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 400;
    color: @red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tags {
    width: 100%;
    margin-top: 16px;
    
    .tag {
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: @font-grey-light;
      border-radius: 6px;
      border: 1px solid @font-grey-light;
      padding: 0 8px;
    }
  }

  .price {
    margin-top: 20px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: 500;
    color: @red-light;
  }

  .others {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: @font-grey-light;

    .type {
      flex: 1;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: @font-grey-light;
    }

    .comment {
      width: 20px;
      height: 18px;
      text-align: right;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .feedback {
    width: 100%;

    .used {
      width: 40%;
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: @font-grey;
    }

    .rate {
      width: 60%;
      text-align: right;
      height: 14px;
      line-height: 14px;
    }
  }
}
</style>
